<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<!-- type="module"表示引入ES6模块 -->
<script type="module">
    import { Group, Matrix4, Vector3, Object3D, Scene, Euler } from '../js/three.module.js';

    const m1 = new Matrix4();
    m1.elements = [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];

    const scene = new Scene();
    scene.applyMatrix4(m1);

    const [angX, angY, angZ] = [30, 45, 60];
    const p1 = new Vector3(1, 2, 3);
    const p2 = p1.clone();

    {
        const rx = new Matrix4().makeRotationX(angX);
        const ry = new Matrix4().makeRotationY(angY);
        const rz = new Matrix4().makeRotationZ(angZ);

        p1.applyMatrix4(rx.multiply(ry).multiply(rz));

        console.log(p1);
    }

    {
        //欧拉角一次性进行xyz旋转
        const euler = new Euler(angX, angY, angZ);
        const m = new Matrix4();
        m.makeRotationFromEuler(euler);

        p2.applyMatrix4(m);

        console.log(p2);
    }

    const obj = new Object3D();
    scene.add(obj);
    //似乎对空对象无效
    obj.position.set(1, 2, 3);



    const ret = new Vector3();
    obj.getWorldPosition(ret);
    console.log(obj.matrix)



</script>

</html>